<template>
    <div class="login">
        <img :src="imgSrc" width="100%" height="100%" alt=""/>
        <div class="loginPart">
            <h2>用户登录</h2>  <!--也阔以用回车登录-->
            <el-form :model="loginFrom" :rules="loginRules" ref="loginForm"
                     @keyup.enter.native="submitForm('loginForm')">
                <el-form-item prop="username">
                    <el-input type="text" v-model="loginFrom.username" placeholder="请输入用户名"
                              prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginFrom.password" placeholder="请输入密码"
                              prefix-icon="el-icon-unlock"
                              show-password></el-input>
                </el-form-item>
                <el-col :span="8">
                    <el-form-item>
                        <el-tooltip content="看不清，换一张" placement="top">
                            <div class="identifybox">
                                <div @click="refreshCode">
                                    <identify-code :identifyCode="identifyCode"></identify-code>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="verifyCode">
                        <!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
                        <el-input v-model="loginFrom.verifyCode" placeholder="请输入验证码" class="identifyinput"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-button type="primary" plain @click="submitForm('loginForm')">登录</el-button>
                </el-col>
            </el-form>
        </div>
    </div>
</template>

<script>
    import IdentifyCode from "./identifyCode"
    import axios from "@/api/request"
    import {Message} from "element-ui";
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: 'Login',
        components: {
            IdentifyCode,
        },
        data() {
            // 验证码自定义验证规则
            const validateVerifycode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'))
                } else if (value !== this.identifyCode) {
                    callback(new Error('验证码不正确!'))
                } else {
                    callback()
                }
            }
            return {
                imgSrc: require('@/assets/loginbg.jpg'),
                identifyCodes: '1234567890',
                identifyCode: '',
                loginFailed: '',
                loginFrom: {
                    username: '',
                    password: '',
                    verifyCode: '',
                },
                loginRules: {
                    username: [
                        {required: true, message: '账号未填写', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码未填写', trigger: 'blur'}
                    ],
                    verifyCode: [
                        {validator: validateVerifycode, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            // 生成随机数
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            // 切换验证码
            refreshCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            // 生成四位随机验证码
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                        this.randomNum(0, this.identifyCodes.length)
                        ]
                }
            },
            //登录
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios({
                                url: "/system/permission/login",
                                params: this.loginFrom
                            }).then((res) => {
                                if (res.code == 200) {
                                    localStorage.setItem("staffId", res.data.staff.id)
                                    localStorage.setItem("staffName", res.data.staff.name)
                                    localStorage.setItem("token", res.data.token)
                                    this.$router.push("/home")
                                } else {
                                    this.refreshCode()
                                }
                            }).catch(()=>{
                                Message.error("服务器异常")
                                this.refreshCode()
                            })
                        } else {
                            this.refreshCode()
                            console.log('error submit!!');
                            return false;
                        }
                    }
                )
                ;
            }
        },
        mounted() {
            this.refreshCode();
        }
    }
</script>

<style lang="css" scoped>
    .loginPart {
        position: absolute;
        /*定位方式绝对定位absolute*/
        top: 50%;
        left: 50%;
        /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
        transform: translate(-50%, -50%);
        /*实现块元素百分比下居中*/
        width: 450px;
        padding: 50px;
        background: rgba(0, 0, 0, .3);
        /*背景颜色为黑色，透明度为0.8*/
        box-sizing: border-box;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型，
        将border和padding划归到width范围内*/
        box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
        border-radius: 15px;
        /*边框圆角，四个角均为15px*/
        backdrop-filter: blur(20px);
    }

    .loginPart h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
        /*文字居中*/
    }

    .loginPart .inputbox {
        position: relative;
    }

    .loginPart .inputElement input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        /*字符间的间距1px*/
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        /*outline用于绘制元素周围的线
        outline：none在这里用途是将输入框的边框的线条使其消失*/
        background: transparent;
        /*背景颜色为透明*/
    }

    .login {
        width: 100%;
        height: 100%;
    }
</style>